﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Master/HomeSubMaster.Master"
    CodeBehind="Add.aspx.cs" Inherits="CSP.Web.MyHome.Address.Add" %>

<asp:Content ID="CSPHead" ContentPlaceHolderID="CSPHead" runat="server">
    <meta charset="utf-8">
    <title>地理位置管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
</asp:Content>
<asp:Content ID="CSPStyleAndScript" ContentPlaceHolderID="CSPStyleAndScript" runat="server">
    <script type="text/javascript" src="/Scripts/Validate/validate.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <style type="text/css">
        #right_container
        {   
            float: right;
            width: 540px;
        }
        #map_container_header
        {
            overflow: hidden;
            zoom: 1;
            padding: 10px;
        }
    </style>
    <script language="javascript" type="text/javascript">
// <![CDATA[
        $().ready(function () {
            $("#MyHome").validate();
        });


// ]]>
    </script>
</asp:Content>
<asp:Content ID="CSPCrumbs" ContentPlaceHolderID="CSPCrumbs" runat="server">
    <div class="crumbs">
        <span>您当前所在的位置：</span> <a href="/">首页</a> &gt; <a href="/MyHome/Account/Management.aspx">我的家园</a> &gt; <span>地理位置管理</span>
    </div>
    <!--crumbs-->
</asp:Content>
<asp:Content ID="CSPRight" ContentPlaceHolderID="CSPMain" runat="server">
    <div class="pr10">
        <div class="tabs tabs-home mt10">
            <div class="tabs-nd">
                <ul class="tabs-hd">
                    <li class="trigger current">地理位置管理</li>
                </ul>
            </div>
            <div class="tabs-bd">
                <div class="tabs-panel">
                    <div class="text-info" style="float: left; width: 440px;">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td height="50" align="right">
                                    <strong class="fc-red">新增服务区域 </strong>
                                </td>
                                <td>
                                    电话号码、手机号选填一项,其余均为必填项
                                </td>
                            </tr>
                            <tr>
                                <td width="29%" height="50" align="right">
                                    <span class="fc-red">*</span>名称：
                                </td>
                                <td width="71%">
                                    <input name="Txt_Name" class="{required:true,maxlength:25}" type="text" id="Txt_Name"
                                        size="20" runat="server">
                                </td>
                            </tr>
                            <tr>
                                <td height="50" align="right">
                                    <span class="fc-red">*</span> 服务区域：
                                </td>
                                <td>
                                    <select name="S_Province" class="{required: true}" onchange="return S_Province_OnChange();"
                                        runat="server" id="S_Province">
                                        <option value="">请选择</option>
                                    </select>
                                    市
                                    <select name="S_City" class="{required: true}" runat="server" onchange="return S_City_OnChange();"
                                        id="S_City">
                                        <option value="">请选择</option>
                                    </select>
                                    区
                                    <select name="S_County" class="{required: true}" runat="server" id="S_County" onchange="return S_County_OnChange();">
                                        <option value="">请选择</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td height="30" valign="bottom" align="right">
                                    <span class="fc-red">*</span>街道地址：
                                </td>
                                <td valign="bottom">
                                    <input name="Txt_Street" type="text" class="{required: true,maxlength:50}" id="Txt_Street"
                                        runat="server" size="40">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                                <td valign="top">
                                    <a href="javascript:MapSearchByAreaAndStreet()">街道定位</a> 不需要重复填写省/市/区
                                </td>
                            </tr>
                            <tr>
                                <td height="50" align="right">
                                    <span class="fc-red">*</span>电话号码：
                                </td>
                                <td>
                                    <input name="Txt_Phone" type="text" class="{required: true,maxlength:25}" id="Txt_Phone"
                                        runat="server" size="10">
                                </td>
                            </tr>
                            <tr>
                                <td height="50" align="right">
                                    <span class="fc-red">*</span>手机号码：
                                </td>
                                <td>
                                    <input name="Txt_Mobile" type="text" class="{required: true,maxlength:15}" id="Txt_Mobile"
                                        runat="server" size="40">
                                </td>
                            </tr>
                            <tr>
                                <td height="50" align="right">
                                    <span class="fc-red">*</span>email地址：
                                </td>
                                <td>
                                    <input name="Txt_Email" type="text" class="{required: true,maxlength:25,email:true}"
                                        id="Txt_Email" runat="server" size="40">
                                </td>
                            </tr>
                            <tr>
                                <td height="50" align="right">
                                    描述：
                                </td>
                                <td>
                                    <asp:TextBox ID="Txt_Introduction" class="{maxlength:100}" runat="server" TextMode="MultiLine"
                                        Rows="5" Columns="40"></asp:TextBox>
                                    <br />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="right_container">
                        <div id="Div1">
                            <div id="map_container_header">
                                <img style="float: left;" src="/Scripts/Map/Img/location.gif">
                                <strong style="float: left;">标注位置</strong> <span style="float: left; color: red;">（点击图区设置位置）</span>
                            </div>
                            <div style="width: 520px; height: 440px; border: 1px solid gray" id="map_container">
                            </div>
                        </div>
                    </div>
                    <div style="clear: both; padding-top: 20px; border-top: 1px solid #ccc; text-align: center;">
                        <div style="display: none">
                            <input name="Txt_CenterPointX" type="text" id="Txt_CenterPointX" runat="server" size="40">
                            <input name="Txt_CenterPointY" type="text" id="Txt_CenterPointY" runat="server" size="40">
                            <input name="Txt_MarkerPointX" type="text" id="Txt_MarkerPointX" runat="server" size="40">
                            <input name="Txt_MarkerPointY" type="text" id="Txt_MarkerPointY" runat="server" size="40">
                            <input name="Txt_Zoom" type="text" id="Txt_Zoom" runat="server" size="40">
                            <input name="Txt_Province" type="text" id="Txt_Province" runat="server" size="40">
                            <input name="Txt_City" type="text" id="Txt_City" runat="server" size="40">
                            <input name="Txt_County" type="text" id="Txt_County" runat="server" size="40">
                            <input type="text" id="Txt_CN_Province" runat="server" size="40">
                            <input type="text" id="Txt_CN_City" runat="server" size="40">
                            <input type="text" id="Txt_CN_County" runat="server" size="40">
                        </div>
                        <input type="submit" class="ui-btn-confirm" onclick="return BtnSubmit();" onserverclick="BtnSubmit_Click"
                            id="Sub_Save" value="保存" runat="server">
                    </div>
                </div>
                <!--tabs-panel-->
            </div>
            <!--tabs-bd-->
        </div>
        <!--tabs-->
    </div>
    <script type="text/javascript" src="/Scripts/Map/setInformation.js"></script>
    <script type="text/javascript">

        CustomMap.Init();
        function S_Province_OnChange() {
            
            if ($("#<%=S_Province.ClientID %>").val() == "") {
                return false;
            }
            $.ajax({
                type: "get",
                dataType: "json",
                //data: { OrderNumber: ordernumber, ShipmentID:shipmentID, Notes: notes, Action: "CancelShipmentByID" },
                url: "Add.aspx?parentid=" + $("#<%=S_Province.ClientID %>").val(),
                async: false,
                error: function (result) {
                    result;
                },
                success: function (data, textStatus) {
                    var selectCity = $("#<%=S_City.ClientID %>");
                    selectCity.find("option").remove();
                    selectCity.append("<option value=''>请选择城市</option>");
                    $.each(data, function (index, item) {
                        var option = "<option value='" + item.Id + "'>" + item.Name + "</option>";
                        selectCity.append(option);
                    });
                    selectCity.find("option").eq(1).selected = true;
                    S_City_OnChange();
                    $("#<%=Txt_Province.ClientID %>").val($("#<%=S_Province.ClientID %>").val());
                    $("#<%=Txt_CN_Province.ClientID %>").val($("#<%=S_Province.ClientID %>").find("option:selected").text());
                }
            });
        }

        function S_City_OnChange() {
            if ($("#<%=S_City.ClientID %>").val() == "") {
                return false;
            }
            $.ajax({
                type: "get",
                dataType: "json",
                //data: { OrderNumber: ordernumber, ShipmentID:shipmentID, Notes: notes, Action: "CancelShipmentByID" },
                url: "Add.aspx?parentsubid=" + $("#<%=S_City.ClientID %>").val(),
                async: false,
                error: function (result) {
                    result;
                },
                success: function (data, textStatus) {
                    var selectCounty = $("#<%=S_County.ClientID %>");
                    selectCounty.find("option").remove();
                    selectCounty.append("<option value=''>请选择地区</option>");
                    $.each(data, function (index, item) {
                        var option = "<option value='" + item.Id + "'>" + item.Name + "</option>";
                        selectCounty.append(option);

                    });
                    selectCounty.find("option").eq(1).selected = true;
                    S_County_OnChange();
                    $("#<%=Txt_City.ClientID %>").val($("#<%=S_City.ClientID %>").val());
                    $("#<%=Txt_CN_City.ClientID %>").val($("#<%=S_City.ClientID %>").find("option:selected").text());
                }
            });

        }

        function S_County_OnChange() {
            $("#<%=Txt_County.ClientID %>").val($("#<%=S_County.ClientID %>").val());
            $("#<%=Txt_CN_County.ClientID %>").val($("#<%=S_County.ClientID %>").find("option:selected").text());
            MapSearchByArea();
        }

        //根据省市地区搜寻
        function MapSearchByArea() {

            var addressInfo = GetAreaInfo();
            CustomMap.SearchAddress(4, addressInfo);
        }

        function BtnSubmit() {
            $("#<%=Txt_CenterPointX.ClientID %>").val(CustomMap.Map.getCenter().lng);
            $("#<%=Txt_CenterPointY.ClientID %>").val(CustomMap.Map.getCenter().lat);
            $("#<%=Txt_Zoom.ClientID %>").val(CustomMap.Map.getZoom());
            $("#<%=Txt_MarkerPointX.ClientID %>").val(CustomMap.MarkerPointX);
            $("#<%=Txt_MarkerPointY.ClientID %>").val(CustomMap.MarkerPointY);
        }

        //获取省市地区 组合信息
        function GetAreaInfo() {
            var selectProvice = $("#<%=S_Province.ClientID %>");
            var selectCity = $("#<%=S_City.ClientID %>");
            var selectCounty = $("#<%=S_County.ClientID %>");

            var addressInfo = selectProvice.find("option:selected").text() + " " + selectCity.find("option:selected").text() + " "
            + selectCounty.find("option:selected").text();
            return addressInfo;
        }

        function MapSearchByAreaAndStreet() {
            var addressInfo = GetAreaInfo() + " " + $("#<%=Txt_Street.ClientID %>").val();
            CustomMap.SearchAddress(4, addressInfo);
        }
    </script>
</asp:Content>
